<template>
    <!-- 通过插槽传递过来 -->
    <div class="tab-bar" >
        <slot></slot>
    </div>
</template>

<script setup>
import {provide} from 'vue'
const props=defineProps({
  modelValue:{
    type:Number,
  }
})
const emit=defineEmits(['update:modelValue'])
// App把active值再传给子组件
provide('TabBar',{
  children:[],//存放子组件的数组，用于计算索引
  props:props,//保存当前激活的状态(active值) props.modelValue
  setActive:function(value){
    emit('update:modelValue',value)
  }
})

</script>

<style scoped>
.tab-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: space-around;
  height: 50px;
  background-color: skyblue;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.3);
}
</style>